<template>
	<view class="main">
		<view>
			<view class="user-list-item" v-for="(item,index) in list" :data-id="item.id" @click="toDetail">
				<view class="user-left">
					<view class="avatar-box"><image class="avatar" :src="item.avatar" mode="widthFix"></image></view>
				</view>
				<view>
					<view class="user-name">{{item.name}}</view>
					<text class="address">{{item.level}}</text>
					<view class="user-desc">{{item.intro}}</view>
					<!-- 
					<view class="honor-list">
						<view class="service">服务人数：102</view>
						<view>好评数：20</view>
					</view> -->
				</view>
			</view>
			
		</view>
		<uni-load-more :status="status" :showText="showText"></uni-load-more>
	</view>
</template>

<script>
	import moment from '@/utils/moment';
	import helper from '@/utils/helper.js';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	/**
	 * JhxTeacherList 教师列表
	 * @description 教师列表组件
	 */
	export default {
		components: {
			uniLoadMore,
		},
		name: 'JhxTeacherList',
		props: {
			list:{
				type:Array,
				value:[]
			},
			status:{
				type:String,
				value:[],
			}
		},
		data() {
			return {
				showText:true
			}
		},
		onload() {},
		onShow() {

		},
		created() {
		},
		beforeDestroy() {

		},
		watch: {
		},
		filters: {
		},
		methods: {
			toDetail:function(e){
				var id = this.getDataSet(e,'id');
				this.goto("/pages/teacher/detail?id="+id);
			}
		}
	}
</script>

<style lang="scss">
	.user-list-item{box-shadow: 0px 6rpx 34rpx 0 rgba(0,0,0,.06);border-radius: 20rpx;display: flex;width: 92%;margin: 0 auto;padding: 30rpx 30rpx;margin-bottom: 30rpx;box-sizing: border-box;}
	.avatar-box{}
	.avatar{width: 152rpx;height:152rpx;border-radius: 50%;border: 4rpx solid #ececec;}
	.user-left{margin-right: 35rpx;text-align: center;}
	.user-name{font-size: 32rpx;margin-bottom: 10rpx;}
	.user-desc{font-size: 28rpx;line-height: 36rpx;margin-right: 72rpx; color: #999;margin: 15rpx 0 15rpx 0;}
	.contact-btn {
	    display: block;
	    width: 160rpx;
	    height: 60rpx;
	    margin: 0 auto;
	    line-height: 60rpx;
	    font-size: 28rpx;
	    color: #fff;
	    background: #15d39f;
	    background-image: linear-gradient(0deg,#14c393 0%,#17dea7 100%);
	    border-radius: 30rpx;
	    text-align: center;
		margin-top: 10rpx;
	}
	.address{font-size: 28rpx;color: #ff6600;margin: 25rpx 0 0 0;background-color: #f9eefb;width: auto !important;padding: 4rpx 15rpx;border-radius: 10rpx;}
	.honor-list{display: flex;font-size: 28rpx;color: #666;}
	.service{margin-right: 20rpx;}
</style>
